<template>
  <div class="rolemanagement">
    <div class="rolecontrol">
      <div class="searchvalue">
        <div class="role">
          <span>角色名</span>
          <el-input ref="roleInput" v-model="roleValue"></el-input>
        </div>
        <div class="date">
          <span>创建日期</span>
          <el-date-picker
          v-model="dateValue"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
      </div>
      <div class="btncontrol">
        <el-button @click="filterTable">查询</el-button>
        <el-button @click="exportExcel">导出</el-button>
        <el-button @click="clearAll">重置</el-button>
      </div>
    </div>
    <div class="roledata">
      <div class="addrole">
        <el-button size="small" @click="goAddrole">添加角色</el-button>
      </div>
      <div class="table">
        <el-table
        size="medium"
        id="roletable"
        :data="roleTableData"
        border
        max-height="650"
        :default-sort = "{prop: 'id', order: 'descending'}"
        style="width:100%">
          <el-table-column
          prop="id"
          label="序号"
          width="150"
          sortable>
          </el-table-column>
          <el-table-column
          prop="rolename"
          label="角色名">
          </el-table-column>
          <el-table-column
          prop="date"
          label="创建日期">
          </el-table-column>
          <el-table-column
          label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      roleValue: '',
      dateValue: '',
      roleTableData: [
        {
          id: 1,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 2,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 4,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 3,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 6,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 5,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        },
        {
          id: 7,
          rolename: 'role2',
          date: '2018-8-21',
          permissions: [
            '运营管理',
            '系统管理'
          ]
        }
      ]
    }
  },
  methods: {
    clearAll () {
      this.roleValue = ''
      this.dateValue = ''
    },
    filterTable () {
    },
    exportExcel () {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#roletable'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
      try {
        FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), 'roles.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    goAddrole () {
      this.$router.push({name: 'Addrole'})
    }
  }
}
</script>

<style lang="less" scoped>
.rolemanagement{
  display: flex;
  flex-direction: column;
  .rolecontrol{
    .searchvalue{
      display: flex;
      box-sizing: border-box;
      padding: 10px;
      div{
        display: flex;
        align-items: center;
        margin: 0 10px;
        span{
          white-space: nowrap;
        }
      }
    }
    .btncontrol{
      display: flex;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
  .roledata{
    padding: 0 20px;
    .addrole{
      margin: 5px 0;
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>
